<template>
  <view>
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>

    <u-cell-group :border="false">
      <u-cell isLink url="./personal">
        <view slot="title" class="avatar">
          <u-avatar size="70" :src="userInfo.headImage || userInfo.memberNumber"></u-avatar>
          <view class="name">{{ userInfo.nickName || userInfo.memberName }}</view>
        </view>
      </u-cell>
      <view class="buy-member"  @click="goUpgradeVip">
        <view class="vip-upgrade">
          <view class="vip-left">
            <view class="vip-icon">
              <u-icon name="level" color="#B07104" size="28"></u-icon>
            </view>
            <view class="vip-text">
              <text class="vip-title">升级尊贵VIP</text>
              <text class="vip-desc">享受更多专属特权</text>
            </view>
          </view>
          <view class="vip-right">
            <u-button type="warning" size="mini" shape="circle">去升级</u-button>
          </view>
        </view>
      </view>
      <u-cell title="账户与安全" isLink @click="onTokenJump('/pages/my/set/account')"></u-cell>
    </u-cell-group>
    <u-gap height="10"></u-gap>
    <!--		<u-cell-group>
          <u-cell title="常见问题" isLink></u-cell>
          <u-cell title="意见反馈" isLink></u-cell>
        </u-cell-group>
        <u-gap height="10"></u-gap>-->
    <u-cell-group>
      <u-cell title="用户协议" isLink @click="onJump('/pages/article/details?id=1518144075075727362')"></u-cell>
      <u-cell title="隐私政策" isLink @click="onJump('/pages/article/details?id=1518144894902775809')"></u-cell>
      <!-- #ifdef APP-PLUS -->
      <u-cell title="清理缓存" :value="fileSizeString" isLink @click="appClearCache"></u-cell>
      <u-cell title="当前版本" :value="'v'+versionInfo.versionName" isLink @click="appUpData"></u-cell>
      <!-- #endif -->
      <!-- #ifdef MP -->
      <u-cell title="检查更新" isLink @click="inspectMpUpData"></u-cell>
      <!-- #endif -->
      <u-cell title="关于我们" isLink @click="onJump('/pages/article/details?id=1518143724792623106')"></u-cell>
    </u-cell-group>
    <view class="button">
      <u-button type="error" shape="circle" @click="logOut">退出登录</u-button>
    </view>
  </view>
</template>

<script>
import {
  mapState,
  mapMutations
} from 'vuex';
// #ifdef APP-PLUS
import {
  formatSize,
  clearCache
} from '@/config/common';
// import APPUpdate from '@/uni_modules/zhouWei-APPUpdate/js_sdk/appUpdate';
// #endif
// #ifdef MP
import {mpUpData} from '@/config/common';
// #endif
import {
  clearMember
} from '@/config/api';

export default {
  data() {
    return {
      fileSizeString: '', //App缓存大小
      versionInfo: {}, //版本信息
    };
  },
  computed: {
    ...mapState(['userInfo'])
  },
  onShareAppMessage() {
    uni.hideShareMenu();
  },
  onShow() {
    this.$loginCheck();
  },
  onLoad() {
    // #ifdef APP-PLUS
    this.appFormatSize() //计算app缓存大小
    this.getCurrentNo() //获取版本号
    // #endif
  },
  methods: {
    // 页面跳转
    onJump(url) {
      uni.navigateTo({
        url: url
      })
    },
    // 跳转前判断登录
    onTokenJump(url) {
      this.judgeLogin(() => {
        uni.navigateTo({
          url: url
        });
      });
    },
    // 去升级VIP
    goUpgradeVip() {
      this.judgeLogin(() => {
       // uni.$u.toast('VIP功能即将上线，敬请期待');
        // 实际上线后可以跳转到VIP购买页面
        uni.navigateTo({
          url: '/pages/vip/index'
        });
      });
    },
    // 退出登录
    logOut() {
      // #ifndef APP-PLUS
      uni.showModal({
        title: "操作提示",
        content: "确定退出登录吗？",
        confirmText: "确定",
        cancelText: "取消",
        confirmColor: "#0E9C98",
        cancelColor: "#999999",
        success: (res) => {
          if (res.confirm) {
            clearMember().then(() => {
              this.$store.commit("emptyUserInfo");
              uni.navigateBack();
            });
          }
        }
      });
      // #endif
      // #ifdef APP-PLUS
      uni.$showModal({
        title: "操作提示",
        confirmVal: '确定',
        cancelVal: '取消',
        content: '确定退出登录吗？',
      }).then(res => {
        clearMember().then(() => {
          this.$store.commit("emptyUserInfo");
          uni.navigateBack();
        });
      });
      // #endif
    },
    // App计算缓存
    appFormatSize() {
      formatSize(res => {
        this.fileSizeString = res
      })
    },
    // App清理缓存
    appClearCache() {
      console.log('清除缓存--')
      clearCache(this.fileSizeString).then(() => {
        this.appFormatSize()
      })
    },
    // App更新
    appUpData() {
      uni.$u.toast('当前没有新版发布');
    },
    // 获取当前应用的版本号
    getCurrentNo(callback) {
      // 获取本地应用资源版本号
      plus.runtime.getProperty(plus.runtime.appid, (inf) => {
        this.versionInfo = {
          versionCode: inf.versionCode,
          versionName: inf.version
        }
      });
    },
    // 检查小程序更新
    inspectMpUpData() {
      // #ifdef MP
      mpUpData(res => {
        if (res.type === 1) {
          // 请求完新版本信息的回调
          if (!res.data.hasUpdate) {
            uni.$u.toast('当前没有新版发布');
          }
        } else if (res.type === 2) {
          // 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
          uni.showModal({
            title: '提示',
            content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
          })
        }
      })
      // #endif
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep.u-cell-group {
  background-color: #FFFFFF;
}

.avatar {
  display: flex;
  align-items: center;

  .name {
    margin-left: 20rpx;
    font-size: 30rpx;
  }
}

.button {
  margin: 5%;
}

.buy-member {
  margin: 20rpx;

  .vip-upgrade {
    background-color: #1E1E1E;
    border-radius: 12rpx;
    padding: 24rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .vip-left {
      display: flex;
      align-items: center;

      .vip-icon {
        background-color: #2D2D2D;
        width: 60rpx;
        height: 60rpx;
        border-radius: 30rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 20rpx;
      }

      .vip-text {
        display: flex;
        flex-direction: column;

        .vip-title {
          font-size: 30rpx;
          color: #B07104;
          font-weight: bold;
          margin-bottom: 6rpx;
        }

        .vip-desc {
          font-size: 24rpx;
          color: #999999;
        }
      }
    }

    .vip-right {
      ::v-deep .u-button {
        background-color: #B07104;
        border-color: #B07104;
      }
    }
  }
}
</style>
